<template>
    <aside>
        <div class="description">You can drag these nodes to the pane.</div>
        <div class="nodes">
            <div class="vue-flow__node-rect" :draggable="true" @dragstart="onDragStart($event, 'rect')">
                <RectNode :id="`id`" :data="rectNodeData" />
            </div>
            <div class="vue-flow__node-round" :draggable="true" @dragstart="onDragStart($event, 'round')">
                <RoundNode :id="`id`" :data="roundNodeData" />
            </div>
            <div class="vue-flow__node-stadium" :draggable="true" @dragstart="onDragStart($event, 'stadium')">
                <StadiumNode :id="`id`" :data="stadiumNodeData" />
            </div>
            <div class="vue-flow__node-subroutine" :draggable="true" @dragstart="onDragStart($event, 'subroutine')">
                <SubroutineNode :id="`id`" :data="subroutineNodeData" />
            </div>
            <div class="vue-flow__node-cylindrical" :draggable="true" @dragstart="onDragStart($event, 'cylindrical')">
                <CylindricalNode :id="`id`" :data="cylindricalNodeData" />
            </div>
            <div class="vue-flow__node-circle" :draggable="true" @dragstart="onDragStart($event, 'circle')">
                <CircleNode :id="`id`" :data="circleNodeData" />
            </div>
            <div class="vue-flow__node-asymmetric" :draggable="true" @dragstart="onDragStart($event, 'asymmetric')">
                <AsymmetricNode :id="`id`" :data="asymmetricNodeData" />
            </div>
            <div class="vue-flow__node-diamond" :draggable="true" @dragstart="onDragStart($event, 'diamond')">
                <DiamondNode :id="`id`" :data="diamondNodeData" />
            </div>
            <div class="vue-flow__node-hexagon" :draggable="true" @dragstart="onDragStart($event, 'hexagon')">
                <HexagonNode :id="`id`" :data="hexagonNodeData" />
            </div>
            <div class="vue-flow__node-parallelogram" :draggable="true" @dragstart="onDragStart($event, 'parallelogram')">
                <ParallelogramNode :id="`id`" :data="parallelogramNodeData" />
            </div>
            <div class="vue-flow__node-trapezoid" :draggable="true" @dragstart="onDragStart($event, 'trapezoid')">
                <TrapezoidNode :id="`id`" :data="trapezoidNodeData" />
            </div>
            <div class="vue-flow__node-doubleCircle" :draggable="true" @dragstart="onDragStart($event, 'doubleCircle')">
                <DoubleCircleNode :id="`id`" :data="doubleCircleNodeData" />
            </div>
        </div>
    </aside>
</template>

<script setup>
import useDragAndDrop from '../../assets/vueflow/useDnD'
import RectNode from './nodes/RectNode.vue'
import DiamondNode from './nodes/DiamondNode.vue'
import AsymmetricNode from './nodes/AsymmetricNode.vue'
import CircleNode from './nodes/CircleNode.vue'
import RoundNode from './nodes/RoundNode.vue'
import StadiumNode from './nodes/StadiumNode.vue'
import SubroutineNode from './nodes/SubroutineNode.vue'
import CylindricalNode from './nodes/CylindricalNode.vue'
import HexagonNode from './nodes/HexagonNode.vue'
import ParallelogramNode from './nodes/ParallelogramNode.vue'
import TrapezoidNode from './nodes/TrapezoidNode.vue'
import DoubleCircleNode from './nodes/DoubleCircleNode.vue'
import { Handle, Position } from '@vue-flow/core'
import { ref } from 'vue'

const { onDragStart } = useDragAndDrop()

// 根据JSON文件中的nodes数组定义各节点的数据
const rectNodeData = ref({
    label: '矩形节点',
    nodeType: 'rect'
})

const roundNodeData = ref({
    label: '圆角矩形节点',
    nodeType: 'round'
})

const stadiumNodeData = ref({
    label: '体育场形节点',
    nodeType: 'stadium'
})

const subroutineNodeData = ref({
    label: '子程序节点',
    nodeType: 'subroutine'
})

const cylindricalNodeData = ref({
    label: '圆柱形节点',
    nodeType: 'cylindrical'
})

const circleNodeData = ref({
    label: '圆形节点',
    nodeType: 'circle'
})

const asymmetricNodeData = ref({
    label: '非对称节点',
    nodeType: 'asymmetric'
})

const diamondNodeData = ref({
    label: '菱形节点',
    nodeType: 'diamond'
})

const hexagonNodeData = ref({
    label: '六边形节点',
    nodeType: 'hexagon'
})

const parallelogramNodeData = ref({
    label: '平行四边形节点',
    nodeType: 'parallelogram'
})

const trapezoidNodeData = ref({
    label: '梯形节点',
    nodeType: 'trapezoid'
})

const doubleCircleNodeData = ref({
    label: '双圆节点',
    nodeType: 'doubleCircle'
})

</script>

<style scoped>
.nodes{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nodes > div {
    cursor: grab;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.nodes > div:hover {
    background-color: #f3f4f6;
    transform: scale(1.05);
}

.nodes > div:active {
    cursor: grabbing;
}

.description {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 16px;
    padding: 8px;
    background-color: #f9fafb;
    border-radius: 4px;
}
</style>